<template>
  <div class="about">
    <h1>调用Vblog API 获取数据111</h1>
    <h4>
      使用 axios 来调用: <a href="https://www.axios-http.cn/">官方文档</a>
    </h4>
    <!-- <h4 id="name">{{ name.split("").reverse().join("") }}</h4> -->
    <!-- <h4 id="name">{{ reverseName }}</h4> -->
    <h4 id="name">{{ reverseFN(name) }}</h4>
    <h4>{{ person }}</h4>

    <!-- html属性id 无法直接访问到变量 -->
    <div :id="name" :style="{ 'background-color': backgroundColor }">
      <!-- 文本值变量 语法ok -->
      {{ name }}
    </div>

    <button @click="handleButtonClick">事件绑定演示(v-on)</button>

    <br />
    <input
      id="username"
      type="text"
      v-model="username"
      v-focus
      @keyup.enter="InputEnd"
      style="margin-right: 20px"
    />
    <input
      id="password"
      type="password"
      v-model="password"
      @keyup.enter="InputEnd"
    />

    <br />
    <input v-model="score" type="text" />
    <div v-show="score >= 90">A</div>
    <div v-show="score >= 80 && score < 90">B</div>
    <div v-show="score >= 60 && score < 80">C</div>
    <div v-show="score >= 0 && score < 60">D</div>

    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      <!-- <div v-if> <div v-for></div></div>
      <div v-for>
        <span v-if></span>
      </div> -->
    </ul>

    <br />
    <button @click="show = !show">Toggle</button>
    <Transition>
      <p v-if="show">hello</p>
    </Transition>

    <!-- 使用UI组件展示数据 -->
    <!-- data.value 进行ref响应式对象的修改, 为啥在模板里面的时候 不使用data.value来访问? -->
    <!-- 模板解析器, 模板编译器 --- html代码, 有模板编译器在编译的时候 自动帮我们补充.value -->
    <a-table :columns="columns" :data="data.items">
      <template #title="{ record }">
        <a-input v-model="record.title" />
      </template>
    </a-table>
  </div>
</template>

<script setup>
// 编写这个页面的js处理逻辑

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  // nextTick,
  reactive,
  watch,
  // computed,
} from "vue";
// import axios from "axios";

// ref 来声明, 通过vue ref函数声明的对象是 响应式的
// "" ==> {value: ''} ==> 追踪(getter/setter)
// data.value 访问该变量  data.getter(value)
// data.value = 10   data.setter(value, 10)
let data = ref("");

let person = reactive({ name: "老喻" });

let list = reactive(["牛奶", "香蕉"]);
let show = ref(true);

const columns = [
  {
    title: "Id",
    dataIndex: "id",
  },
  {
    title: "标题",
    dataIndex: "title",
    slotName: "title",
  },
  {
    title: "作者",
    dataIndex: "author",
  },
  {
    title: "概述",
    dataIndex: "summary",
  },
];

onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
});

onUpdated(() => {
  console.log("onUpdated");
});

onBeforeMount(() => {
  console.log("onBeforeMount");
});

// 使用ref来为基础类型 构造响应式变量
// <h4 id="name">{{ name }}</h4>
let name = ref("老喻");

// 一个计算属性 ref
// reverseName
// reverseName = 'xxx'
// const reverseName = computed({
//   // getter reverseName --> get()
//   get() {
//     return name.value.split("").reverse().join("");
//   },
//   // setter reverseName = "xxxx"
//   set(newValue) {
//     name.value = newValue.split("").reverse().join("");
//   },
// });

let username = ref("");
let password = ref("");

const InputEnd = () => {
  alert(username.value);
};

let score = ref(100);

// 定义为一个函数,在模板中使用该函数来处理数据
const reverseFN = (data) => {
  return data.split("").reverse().join("");
};

const backgroundColor = ref("red");
const handleButtonClick = () => {
  backgroundColor.value = "blue";
  // divTestClassEnable.value = !divTestClassEnable.value;
};

// 监听了name这个响应式对象的变化
watch(name, (newName, oldName) => {
  console.log("变化后:", newName);
  console.log("变化前:", oldName);
});

// 页面挂载完成后的执行js逻辑
// 只有等模版挂载好后，我门才能获取到对应的HTML元素
onMounted(async () => {
  // 通过value来设置 基础类型的值(Setter方式)
  // 响应式变量，修改完了后 视图会立马更新
  // <h4 id="name">张三</h4>
  // name.value = "张三";
  // 通过js 操作该elemnt, 获取当前 id=name的元素的的值
  // 猜想下 id=name 元素的值是多少? 张三? 老喻 (结合更新是异步的原理)
  // 老喻? 为什么不是张三?
  // console.log(document.getElementById("name").innerText);
  // 手动触发vue更新视图
  // nextTick(() => {
  //   console.log(document.getElementById("name").innerText);
  // });
  // console.log("onMounted");
  // try {
  //   let resp = await axios.get("http://localhost:8050/vblog/api/v1/blogs/");
  //   data.value = resp.data;
  // } catch (error) {
  //   alert(error);
  // }

  // 界面页面加载好后
  const username = document.getElementById("username");
  username.focus();
});

onBeforeUnmount(() => {
  console.log("before unmount");
});

onUnmounted(() => {
  console.log("unmounted");
});
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

.div-test {
  background-color: blueviolet;
}
</style>
